"use client";
import {
  PageContainer,
  ProForm,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormTreeSelect,
} from "@ant-design/pro-components";
import { useRequest } from "ahooks";
import { Button, Card, Col, Flex, message, Row, Space } from "antd";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { RollbackOutlined } from "@ant-design/icons";
import {
  addDeptApi,
  updateDeptApi,
  getDeptApi,
  getDeptTreeApi,
} from "@/lib/api/system/dept";
import { Dept } from "@/lib/api/system/dept.d";

export default function Page() {
  const { type } = useParams();
  const router = useRouter();
  const params = useSearchParams();
  const deptId = params.get("deptId");

  const title = type === "add" ? "新增用户" : "修改用户";

  const { run: addDept, loading: addDeptLoading } = useRequest(addDeptApi, {
    manual: true,
    onSuccess: () => {
      message.success("新增成功");
      router.back();
    },
    onError: (error: any) => {
      message.error(error.msg);
    },
  });

  const { run: updateDept, loading: updateDeptLoading } = useRequest(
    (params) => updateDeptApi({ ...params, deptId: deptId }),
    {
      manual: true,
      onSuccess: () => {
        message.success("修改成功");
        router.back();
      },
      onError: (error: any) => {
        message.error(error.msg);
      },
    },
  );

  const extraProps =
    type !== "add"
      ? {
          request: async () => {
            const res = await getDeptApi(deptId as string);
            return res.data;
          },
        }
      : {
          defaultFormValues: {
            parentId: 101,
          },
        };

  return (
    <PageContainer
      title={title}
      extra={
        <Button icon={<RollbackOutlined />} onClick={() => router.back()}>
          返回
        </Button>
      }
    >
      <Card>
        <ProForm
          layout="horizontal"
          submitter={{
            render: (_, dom) => {
              return (
                <Flex justify="center">
                  <Space>{dom}</Space>
                </Flex>
              );
            },
            searchConfig: { submitText: "保存" },
          }}
          className="max-w-[800px] mx-auto my-10"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          loading={addDeptLoading || updateDeptLoading}
          onFinish={async (values: Dept) => {
            if (type === "add") {
              await addDept(values);
            } else {
              await updateDept(values);
            }
          }}
          {...extraProps}
        >
          <Row gutter={16}>
            <Col span={12}>
              <ProFormText name="userId" label="用户名称" required />
            </Col>
            <Col span={12}>
              <ProFormTreeSelect
                name="parentId"
                label="归属部门"
                key="id"
                fieldProps={{
                  fieldNames: { label: "label", value: "id" },
                }}
                request={async () => {
                  const res = await getDeptTreeApi();
                  return res.data;
                }}
                required
                rules={[{ required: true, message: "请输入字典名称" }]}
              />
            </Col>
            <Col span={12}>
              <ProFormText name="phone" label="手机号码" />
            </Col>
            <Col span={12}>
              <ProFormText name="email" label="邮箱" />
            </Col>
            <Col span={12}>
              <ProFormText name="userName" label="用户名称" />
            </Col>
            <Col span={12}>
              <ProFormText name="deptName" label="用户密码" />
            </Col>
            <Col span={12}>
              <ProFormSelect name="sex" label="用户性别"></ProFormSelect>
            </Col>
            <Col span={12}>
              <ProFormRadio name="status" label="状态"></ProFormRadio>
            </Col>
            <Col span={12}>
              <ProFormText label="岗位"></ProFormText>
            </Col>
            <Col span={12}>
              <ProFormText label="角色" required></ProFormText>
            </Col>
            <Col span={24}>
              <ProFormTextArea
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
                label="备注"
              ></ProFormTextArea>
            </Col>
          </Row>
        </ProForm>
      </Card>
    </PageContainer>
  );
}
